<template>
    <div class="like">
      <div class="like-title">
        <img class="like-title-img" src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
        <span class="like-title-desc">猜我喜欢</span>
      </div>

      <ul class="like-list">
        <router-link
          class="like-item border-bottom"
          tag="li"
          v-for="item of list"
          :key="item.id"
          :to="'/detail/' + item.id">
          <div class="left">
            <img class="left-img" :src="item.imgUrl" alt="">
            <div class="left-info">可订明日</div>
          </div>
          <div class="right">
             <span class="title">{{ item.title }}</span>
             <span class="desc">{{ item.desc }}</span>
             <div class="price-info">
               <span class="price">¥ {{ item.price }}</span>
               <span style="padding: 0">起</span>
             </div>
          </div>
        </router-link>
      </ul>
    </div>
</template>

<script>
export default {
  name: 'Like',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/mixins.styl"
  .like
    font-family Arial,"Microsoft Yahei","Helvetica Neue",Helvetica,sans-serif
    .like-title
      margin-bottom .2rem
      .like-title-img
        width .3rem
        height .3rem
        vertical-align top
        margin-left .2rem
      .like-title-desc
        font-family "微软雅黑"
        font-size .3rem
        margin-bottom .3rem
    .like-list
      width 95%
      margin 0 auto
      .like-item
        overflow hidden
        display flex
        height 2rem
        margin-bottom .1rem
        padding-bottom .1rem
        .left
          position relative
          .left-info
            background url("https://img1.qunarzz.com/piao/fusion/1802/52/b9080e45b69b4f02.png")
            background-size 100%
            height .38rem
            width 1.02rem
            line-height .38rem
            color #ffffff
            position absolute
            top 0
            font-size .2rem
          .left-img
            width: 2rem
            height: 2rem
        .right
          padding 0.05rem
          flex 1
          position relative
          span
            margin-bottom .1rem
            padding-left .1rem
          .title
            font-size .3rem
          .desc
            margin-top .1rem
            font-size .3rem
            color #666161
            ellipsis_4()
          .price-info
            position absolute
            bottom 0
            .price
              font-size .4rem
              height 20%
              color #ff8300
</style>
